<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无订单数据~"
      :empty-view-img-style="{ width: '12rem' }"
    >
      <view slot="top">
        <u-navbar
          height="50"
          back-icon-color="#333"
          title="拼团商品"
          title-color="#333"
          title-size="36"
        >
        </u-navbar>
      </view>

      <view class="goods-list-box" v-for="item in itemList" :key="item.id" @click="routeTo(item)">
        <view class="gods-img-box">
          <image class="goods-img" :src="item.picUrl" mode=""></image>
        </view>
        <view class="goods-dsce">
          <view class="goods-title-tip">
            <text>{{ item.name }}</text>
          </view>
          <view class="goods-price-info">
            <view class="goods-price-item">
              <view class="goods_price">
                <view class="">
                  <text class="price_tip">拼团价¥</text>
                  <text class="price_main">{{ item.combinationPrice * 0.01 }}</text
                  ><text class="price_dot"></text>
                </view>
              </view>
              <view class="goods_old_price"> ¥{{ item.marketPrice * 0.01 }} </view>
            </view>
            <button>立即开团</button>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: []
    }
  },
  onShow() {
    this.queryList(1, 10)
  },

  methods: {
    queryList(pageNo, pageSize) {
      this.$u
        .get('/app-api/promotion/combination-activity/page', {
          pageNo,
          pageSize
        })
        .then((res) => {
          this.itemList = res.data.list
        })
    },
    routeTo(item) {
      if (!uni.getStorageSync('userInfo')) {
        this.$utils.goToLogin()
        return
      }
      uni.navigateTo({
        url:
          '/goods/group-goods-details/group-goods-details?combinationPrice=' +
          item.combinationPrice +
          '&goodsId=' +
          item.spuId +
          '&activityId=' +
          item.id
      })
    }
  }
}
</script>

<style>
page {
  background: #eeeeef;
}
.goods-list-box {
  display: flex;
  height: 245rpx;
  background-color: #ffffff;
  padding: 15rpx;
  margin-bottom: 12rpx;
}

.goods-img-box {
  flex: 3;
  width: 230rpx;
  padding: 30rpx;
}
.goods-img {
  width: 220rpx;
  height: 220rpx;
}
.goods-dsce {
  flex: 7;
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}
.goods-title-tip {
  flex: 7;
}

.goods-title-tip text {
  font-size: 40rpx;
}
.goods-price-item {
  float: left;
  margin-top: 90rpx;
}

.goods-price-info button {
  float: right;
  margin-right: 10rpx;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  background-color: #0f76bc;
  color: #ffffff;
  margin-top: 90rpx;
}

.goods_price {
  flex: 3;
  font-size: 25rpx;
  color: red;
  display: flex;
}
.price_tip {
  font-size: 20rpx;
}
.price_main {
  font-size: 35rpx;
}
.price_dot {
  font-size: 30rpx;
  align-self: flex-end;
}

.goods_old_price {
  color: #89898a;
  text-decoration: line-through;
}
</style>
